<template>
  <div
    id="jay-desktop-contextmenu"
    :style="{
      left: `${left}px`,
      top: `${top}px`,
    }"
    @dblclick.prevent.stop
    @click.prevent.stop="onClick"
    @mousedown.prevent.stop
  >
    <div class="jay-desktop-contextmenu-item">
      <span>刷新</span>
    </div>
    <div class="jay-desktop-contextmenu-item">
      <span>粘贴</span>
    </div>
    <div class="jay-desktop-contextmenu-divider"></div>
    <div class="jay-desktop-contextmenu-item">
      <span>新建文件夹</span>
    </div>
    <div class="jay-desktop-contextmenu-item">
      <span>打开控制台</span>
    </div>
    <div class="jay-desktop-contextmenu-divider"></div>
    <div class="jay-desktop-contextmenu-item">
      <span>壁纸切换</span>
    </div>
    <div class="jay-desktop-contextmenu-item">
      <span>设置</span>
    </div>
    <div class="jay-desktop-contextmenu-item">
      <span>关于</span>
    </div>
  </div>
</template>

<script>
  export default {
    name: "DeskContextMenu",
    props:{
      left:{
        type:[String,Number],
        required:true
      },
      top:{
        type:[String,Number],
        required:true
      }
    },
    methods:{
      onClick(){

      }
    }
  }
</script>

<style lang="scss">
  #jay-desktop-contextmenu{
    position: absolute;
    z-index: 100;
    display: flex;
    flex-direction: column;
    background-color: #fbfbfb;
    padding: 10px 0;
    width: 206px;
    border: 1px solid #cccccc;
    border-radius: 6px;
    user-select: none;
    .jay-desktop-contextmenu-item{
      padding: 4px 0;
      margin: 0 4px 4px 4px;
      color: #333333;
      display: flex;
      border-radius: 4px;
      &:hover{
        background: #dddeee;
      }
      span{
        margin-left: 16px;
        font-size: 14px;
        font-family: "Microsoft YaHei UI",Avenir, Helvetica, Arial, sans-serif;
      }
    }
    .jay-desktop-contextmenu-divider{
      width: 100%;
      height: 1px;
      background: #cccccc;
      margin: 4px 0;
    }
  }
</style>